<script lang="ts" setup>
import { ref, computed } from 'vue'
import MenuItem from '@/components/my-el-menu-item.vue'
import MessageBox from '@/components/message-box.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const menulist = ref([
  {
    name: '首页',
    path: '/home/pro',
    icon: 'HomeFilled',
    children: [
      {
        name: '首页1',
        path: '/home/pro1',
        icon: 'HomeFilled'
      },
      {
        name: '首页2',
        path: '/home/pro2',
        icon: 'HomeFilled'
      }
    ]
  },
  {
    name: '组件',
    path: '/home/class',
    icon: 'Document'
  },
  {
    name: '角色',
    path: '/home/advertising',
    icon: 'Document'
  },
  {
    name: '员工',
    path: '/home/user',
    icon: 'User'
  },
  {
    name: '权限',
    path: '/home/permission',
    icon: 'Lock'
  },
  {
    name: '考勤',
    path: '/home/attendance',
    icon: 'Calendar'
  },
  {
    name: '审批',
    path: '/home/approval',
    icon: 'Document'
  },
  {
    name: '工资',
    path: '/home/salary',
    icon: 'Money'
  },
  {
    name: '社保',
    path: '/home/social',
    icon: 'VideoCamera'
  }
])
const isSidebarVisible = ref(false)
const message = ref(false)
const gl = ref(false)

// computed监听依赖，更新缓存路由，解决刷新页面路由丢失问题
const activekey = computed(() => {
  return window.location.pathname
})
const toggleSidebar = () => {
  isSidebarVisible.value = !isSidebarVisible.value
}
const changemessage = () => {
  message.value = !message.value
}
const goOut = () => {
  localStorage.removeItem('token')
  router.replace('/login')
}
</script>

<template>
  <el-container class="common-layout">
    <el-aside
      :width="isSidebarVisible == true ? '50px' : '200px'"
      style="scrollbar-width: none"
    >
      <img src="/public/1.png" alt="" style="height: 60px; width: 200px" />
      <el-menu
        class="el-menu-vertical-demo"
        unique-opened
        router="true"
        style="color: white"
        :default-active="activekey"
      >
        <!-- 如果有children嵌套可以这么写： -->
        <!-- <el-sub-menu
          :index="item.name"
          v-for="item in menulist"
          :key="item.name"
        >
          <template #title>
            <span style="color: white;">
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.name }}</span>
            </span>
          </template>
          <el-menu-item
            :index="subItem.path"
            v-for="subItem in item.children"
            :key="subItem.path"
          >
            <el-icon><component :is="subItem.icon" /></el-icon>
            {{ subItem.name }}
          </el-menu-item>
        </el-sub-menu> -->
        <!-- 源代码： -->
        <!-- <el-menu-item
          :index="subItem.path"
          v-for="subItem in menulist"
          :key="subItem.path"
        >
          <el-icon><component :is="subItem.icon" /></el-icon>
          {{ subItem.name }}
        </el-menu-item> -->
        <!-- 封装传子： -->
        <menu-item v-for="item in menulist" :key="item.path" :item="item" />
      </el-menu>
      <div class="bottom"></div>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left">
          <svg
            t="1727056191143"
            class="icon"
            viewBox="0 0 1352 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4540"
            width="20"
            height="20"
            @click="toggleSidebar"
          >
            <path
              d="M201.920401 665.6a53.76 53.76 0 0 0 75.52-76.8L134.080401 448l140.8-132.48a53.76 53.76 0 0 0-74.24-79.36L19.520401 407.68a53.76 53.76 0 0 0 0 78.08z m1094.4 248.96H58.560401a53.76 53.76 0 1 0 0 109.44h1237.76a53.76 53.76 0 1 0 0-108.16z m0-503.04H448.320401a53.76 53.76 0 1 0 0 108.16h844.8a53.76 53.76 0 1 0 0-108.16zM54.080401 108.16h1242.24a53.76 53.76 0 1 0 0-108.16H54.080401a53.76 53.76 0 1 0 0 108.16z"
              fill="#5E5C5C"
              p-id="4541"
            ></path>
          </svg>
          <span>
            {{ $route.name }}
          </span>
          <MessageBox @click="changemessage" v-if="message" />
        </div>
        <div class="right">
          <svg
            t="1727056975104"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6445"
            width="22"
            height="22"
            @click="changemessage"
          >
            <path
              d="M593.861938 788.582269 424.670537 788.582269c-9.444093 0-18.437931 3.931542-24.695448 10.902304-6.313799 6.970762-9.441023 16.32378-8.547677 25.675776 2.860141 29.191856 16.32378 56.238862 38.009685 76.018348 21.772886 20.016893 50.161447 31.0379 79.889515 31.0379 29.696346 0 58.084906-11.022031 79.830163-30.977525 21.714558-19.839861 35.178197-46.885843 38.068014-76.255755 0.595564-9.473769-2.534729-18.707061-8.638751-25.498744C612.299869 792.513812 603.306031 788.582269 593.861938 788.582269zM555.020304 863.825974c-25.082258 22.877033-66.604954 22.817682-91.567485 0.060375-7.596002-6.970762-13.404288-15.429411-17.157775-24.723078l125.82266 0C568.394916 848.51629 562.643935 856.914564 555.020304 863.825974z"
              fill="#231F20"
              p-id="6446"
            ></path>
            <path
              d="M818.608631 648.343271l-62.763462-82.927711 0-36.22197 0-13.046131L755.845169 410.432767c0-70.745251-24.215518-136.337131-68.182892-184.682209-26.003234-28.625968-57.310264-49.715285-93.055372-62.821791-3.306302-18.944468-12.720719-36.251645-26.926256-49.207725-32.050973-29.251208-85.104283-29.251208-117.095905 0-14.356986 13.046131-23.77038 30.382984-26.986631 49.2681-35.71441 13.046131-67.022463 34.135448-93.025697 62.791092-43.937698 48.434106-68.183915 114.025986-68.183915 184.652534l0.179079 154.686035-62.315254 82.45085c-8.757454 9.353019-13.582343 21.506826-13.582343 34.256198l0 40.331567c0 27.643594 22.460548 50.042743 50.042743 50.042743l544.812313 0c27.610848 0 50.011021-22.400173 50.011021-50.042743l0-40.331567C831.535035 669.075455 826.739822 656.921647 818.608631 648.343271zM535.776008 149.881612c-7.387247-0.655939-19.301602-1.906419-26.569122-1.906419-7.29822 0-19.689435 1.251503-27.048029 1.906419C494.578724 129.627313 526.542716 133.379777 535.776008 149.881612zM237.426992 722.156394l-0.119727-40.034808 62.315254-82.449827c8.698103-9.354042 13.524015-21.447475 13.524015-34.256198L313.146535 410.432767c0-58.056254 19.540032-111.553679 54.986335-150.634766 17.574261-19.361977 38.307468-34.374902 61.540611-44.681642 48.851615-21.745257 110.302175-21.745257 159.096485 0 23.321148 10.425444 43.99398 25.438369 61.538565 44.681642 35.449373 39.081087 54.958706 92.578512 54.958706 150.634766l0 105.715717 0 13.046131 0 36.22197c0 12.867052 4.825912 25.081235 12.95608 33.539884l62.791092 82.868359 0.508583 39.795355L237.426992 722.156394z"
              fill="#231F20"
              p-id="6447"
            ></path>
          </svg>
          <img
            src="/public/7.png"
            alt=""
            @click="gl = !gl"
            style="width: 40px; height: 40px"
          />
          <span @click="gl = !gl">管理员</span>
          <div v-if="gl" class="gl">
            <el-button class="el-button" type="primary" @click="goOut"
              >退出登录</el-button
            >
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
.el-container {
  height: 100%;
  .el-menu-vertical-demo {
    height: calc(100% - 260px);
    border: none;
    background: linear-gradient(to bottom, #070143, rgb(3, 30, 71));
  }
  .el-menu-item {
    color:white;
  }
  .el-menu-item.is-active {
    background: linear-gradient(to right, #0d3592, rgb(66, 75, 103));
  }
  .el-menu-item:hover {
    background: linear-gradient(to right, #4f6db2, rgb(45, 53, 84));
  }
  .el-header {
    color: #605f5f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      line-height: 45px;
    }
    .left,
    .right {
      display: flex;
    }
    svg {
      margin-right: 5px;
      color: black;
      padding: 10px;
      &:hover {
        background-color: #0f51cc;
        cursor: pointer;
      }
    }
  }

  .bottom {
    background-image: url(/public/8.png);
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .el-main {
    background: #e4e7f0;
    padding: 20px;
    .white {
      background-color: white;
    }
  }
}
.el-aside {
    background-color: #011152;
}
.gl {
  z-index: 2;
  position: fixed;
  right: 10px;
  top: 45px;
  width: 150px;
  height: 150px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: #0d3592 0px 0px 10px;
  border-radius: 5px;
  .el-button {
    width: 70px;
    height: 35px;
  }
}
</style>